<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        body {
            background: #fff
        }

        .balance {
            height: 14.55rem;
            margin: 1rem .6rem;
            box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
            border-radius: .5rem;
            padding: 0 .6rem
        }
        .money{
          margin: 1.2rem auto 1rem auto;
        }
        .btn{
          margin: 1.25rem  0 ;
          width:100%;
        }
    </style>
</head>

<body>
    <section>
        <div class="font-12 text-color-3 balance" id="app">
            <div class="flex-justify-between">
              <div class="flex-align-center" style='height:4rem'>
                <img class='height-44' src="../../image/merchant/jsyh-logo.png" alt="" style="margin-right:0.6rem">
                <div >
                  <div class="font-16">
                    {{cardInfo.bankName}}
                  </div>
                  <div class="font-12 text-color-6" style="margin-top:0.1rem">
                    尾号{{cardInfo.num}}{{cardInfo.cardType}}
                  </div>
                </div>
                </div>
                <img class='grey-right' src="../../image/common/grey-right.png" alt="">
            </div>
            <div class="money">
              <div class="font-14">提现金额</div>
              <div style="font-size:1.5rem;margin-top:.6rem">¥<span>{{cardInfo.money}}</span></div>
            </div>
            <div class="flex-justify-between">
              <div class="text-color-6">
                将收取0.05%的手续费，可用余额{{cardInfo.availabilityMoney}}元
              </div>
              <div class="red-text" tapmode @click='allWithdrawal'>
              全部提现
              </div>
            </div>
            <button class='red-btn btn' @click='toSignedWithdrawal'>预计两小时内到账，确认提现</button>
        </div>
    </section>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
         cardInfo:{
           bankName:'中国银行',
           num:'1234',
           cardType:'储蓄卡',
           money:'666',
           availabilityMoney:'888'
         }
        },
        methods: {
          //全部提现
          allWithdrawal:function(){
            this.cardInfo.money = this.cardInfo.availabilityMoney
          },
          toSignedWithdrawal:function(){
            api.confirm({
                title: '打款电子协议',
                msg: '为了保证提现的顺畅，首次提现您需要签署打款电子协议',
                buttons: ['去签署', '取消']
            }, function(ret, err){
                if( ret ){
                     alert( JSON.stringify( ret ) );
                     api.openFrame({
                         name: 'signed-withdrawal_win',
                         url: './signed-withdrawal_win.html',
                         rect: {
                             x: 0,
                             y: 0,
                             w: api.winWidth,
                             h: api.winHeight
                         },
                     });
                }else{
                     alert( JSON.stringify( err ) );
                }
            });


          }
        }
    });
    apiready = function() {
        api.parseTapmode();
    };
</script>

</html>
